<template>
  <div id="test">
    <a-card hoverable id="headcard">
      <a-row id="headrow">
        <a-col :span="8">
          <a-cascader
            :options="options"
            style="width: 100%"
            :show-search="{ filter }"
            placeholder="请选择设备"
            @change="onChange"
          />
        </a-col>
        <a-col :span="16"></a-col>
      </a-row>
    </a-card>
    <a-card hoverable id="footcard">
      <a-row id="rowtable">
        <a-col>
          <a-table
            :columns="columns"
            :data-source="data"
            :loading="loading"
            bordered
            :scroll="scroll"
          >
            <!-- 'paramId', 'description', -->
            <template v-for="col in ['value']" :slot="col" slot-scope="text, record">
              <div :key="col">
                <a-input
                  v-if="record.editable"
                  style="margin: -5px 0"
                  :value="text"
                  @change="e => handleChange(e.target.value, record.key, col)"
                />
                <template v-else>{{ text }}</template>
              </div>
            </template>
            <template slot="operation" slot-scope="text, record">
              <div class="editable-row-operations">
                <span v-if="record.editable">
                  <a @click="() => save(record.key)">保存&#32;</a>
                  <a-popconfirm title="确定取消?" @confirm="() => cancel(record.key)">
                    <a>&#32;取消</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
                </span>
              </div>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script>
import { GetCallParam, WriteParameters } from "../config/apiList";
import { notification } from "ant-design-vue";
const columns = [
  {
    title: "参数编号",
    dataIndex: "paramId",
    width: "10%",
    sorter: (a, b) => a.paramId - b.paramId,
    scopedSlots: { customRender: "paramId" },
  },
  {
    title: "参数描述",
    dataIndex: "description",
    ellipsis: true,
    scopedSlots: { customRender: "description" },
  },
  {
    title: "参数值",
    dataIndex: "value",
    sorter: (a, b) => a.value - b.value,
    scopedSlots: { customRender: "value" },
  },
  {
    title: "操作",
    dataIndex: "operation",
    width: "10%",
    scopedSlots: { customRender: "operation" },
  },
];
export default {
  data() {
    return {
      columns,
      data: [],
      selectdevice: "",
      loading: false,
      options: [
        {
          value: "HumTemDevice",
          label: "温湿度设备",
          children: [
            {
              value: "30014563",
              label: "办公室测试设备",
            },
          ],
        },
      ],
      editingKey: "",
      scroll: { y: "calc(100vh - 357px)" },
    };
  },
  methods: {
    notification(data) {
      debugger;
      notification[data.type]({
        message: data.message,
        description: data.description,
        duration: data.duration,
      });
    },
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.filter((item) => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.filter((item) => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      let vue = this;
      vue.loading = true;
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.filter((item) => key === item.key)[0];
      const targetCache = newCacheData.filter((item) => key === item.key)[0];
      WriteParameters({
        deviceid: vue.selectdevice,
        paramid: target.paramId,
        paramval: target.value,
      }).then((e) => {
        vue.loading = false;
        if (e.data.requstresult === 0) {
          vue.notification({
            type: "error",
            message: "错误",
            description: "参数修改报错",
            duration: 3,
          });
          return;
        }
        vue.notification({
          type: "success",
          message: "成功",
          description: "参数修改成功",
          duration: 3,
        });
        vue.getcallparam();
      });

      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = "";
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.filter((item) => key === item.key)[0];
      this.editingKey = "";
      if (target) {
        Object.assign(
          target,
          this.cacheData.filter((item) => key === item.key)[0]
        );
        delete target.editable;
        this.data = newData;
      }
    },
    onChange(value, selectedOptions) {
      if (value.length == 0) {
        this.data = [];
        return;
      }
      debugger;
      this.selectdevice = value[1];
      this.getcallparam();
    },
    getcallparam() {
      let vue = this;
      vue.loading = true;
      GetCallParam({ deviceid: vue.selectdevice }).then((e) => {
        vue.loading = false;
        if (e.data.requstresult === 0) {
          vue.notification({
            type: "error",
            message: "错误",
            description: "参数获取报错",
            duration: 3,
          });
          return;
        }
        e.data.data.parameterList.forEach((element) => {
          vue.data.push({
            key: element.paramId,
            paramId: element.paramId,
            description: element.description,
            value: element.value,
          });
        });
        vue.notification({
          type: "success",
          message: "成功",
          description: "参数获取成功",
          duration: 3,
        });
        vue.cacheData = vue.data.map((item) => ({ ...item }));
      });
    },
    filter(inputValue, path) {
      return path.some(
        (option) =>
          option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
      );
    },
  },
};
</script>
<style lang="less">
#headrow {
  #headcard {
    height: 80px;
  }
}
#footcard {
  margin-top: 10px;
}
</style>